<template>
    <div class="register-box">
     <header class="register2">
    <a class="iconfont icon-fanhui" @click="back"></a><h1>注册</h1>
    </header>
    <div class="content">
       <div class="sendCode">
           <div class="sendCodeInfo">
                <div><span>验证码已发送到</span><em>{{tel}}</em><span>手机上</span></div>
                <div>更换手机号＞</div>
           </div>
           <div class="sendCodeInput">
              <i class="iconfont icon-yanzhengma"></i><input type="text" placeholder="验证码" v-model="usercode" @input="judge"><a v-show="show" @click="getCode">获取验证码</a><a v-show="!show">{{count}}</a>
           </div>
       </div>
       <div class="registered">
          <div class="users">
              <i class="iconfont icon-yonghu"></i><input type="text" placeholder="用户名：5-25位字母开头，支持数字下划线"  v-model="username" @input="judge"/>
          </div>
          <div class="password" >
              <i class="iconfont icon-mima"></i><input :type="type1" placeholder="设置密码：6-20位，两种字符组合" v-model="password1" @input="judge"/> <span @click="hidden1"><i :class="[iconfont, yanjing1]" ></i></span>
          </div>
          <div class="password" >
              <i class="iconfont icon-mima"></i><input :type="type2" placeholder="重复密码：6-20位，两种字符组合"  v-model="password2" @input="judge"/> <span @click="hidden2"><i :class="[iconfont, yanjing2]" ></i></span>
          </div>

       </div>
       <div class="agreement">
       <van-radio-group v-model="radio">
         <van-radio name="1" checked-color="#07c160">我已经同意<a>《用户注册协议》</a></van-radio>
       </van-radio-group>
       </div>
       <div class="register-btn" @click="registerBtn"><van-button  type="primary" size="large" round :color='btnColor' :disabled='flag'>注册</van-button></div>
    </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { getCode, addUser } from '@/utils/api.js'
import { RadioGroup, Radio, Button, Toast } from 'vant'
Vue.use(RadioGroup).use(Button).use(Toast)
Vue.use(Radio)
export default {
  data () {
    return {
      firstSendCode: true,
      disabled: false,
      radio: '1',
      tel: '',
      code: '',
      show: true,
      count: '',
      timer: null,
      iconfont: 'iconfont',
      yanjing1: 'icon-yanjing1',
      yanjing2: 'icon-yanjing1',
      type1: 'password',
      type2: 'password',
      btnColor: '#c3c3c3',
      username: '',
      password1: '',
      password2: '',
      usercode: '',
      flag: false
    }
  },
  methods: {
    back () {
      this.$router.back()
    },
    hidden1 () {
      if (this.type1 === 'password') {
        this.yanjing1 = 'icon-yanjing'
        this.type1 = 'text'
      } else {
        this.yanjing1 = 'icon-yanjing1'
        this.type1 = 'password'
      }
    },
    hidden2 () {
      if (this.type2 === 'password') {
        this.yanjing2 = 'icon-yanjing'
        this.type2 = 'text'
      } else {
        this.yanjing2 = 'icon-yanjing1'
        this.type2 = 'password'
      }
    },
    getCode () {
      getCode(this.tel).then(res => {
        this.code = res.code
      })
      const TIME_COUNT = 60
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.show = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    },
    judge () {
      if (this.username !== '' && this.usercode !== '' && this.password1 !== '' && this.password2 !== '') {
        // console.log(1)
        this.btnColor = '#0f5'
        this.flag = true
      } else {
        this.btnColor = '#c3c3c3'
        this.flag = false
      }
    },
    registerBtn () {
      if (this.usercode * 1 === this.code) {
        if (/^[a-zA-Z][a-zA-Z0-9_]*$/.test(this.username)) {
          if (/(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^[^\s\u4e00-\u9fa5]{6,20}$/.test(this.password1)) {
            window.console.log('psd')
            if (this.password1 === this.password2) {
              window.console.log('psd2')
              addUser(this.tel, this.password1, this.username).then(() => {
                Toast('注册成功')
                this.$router.replace('/login')
              })
            } else {
              Toast('两次密码不一致')
            }
          } else {
            Toast('密码格式错误')
          }
        } else {
          Toast('用户名格式错误')
        }
      } else {
        Toast('验证码错误请重新发送')
      }
    }
  },
  created () {
    this.tel = this.$route.query.tel
    if (this.firstSendCode) {
      // 初始加载设置为true,执行第一次就设置为false
      this.firstSendCode = false
      // 发送验证码，此处的
      getCode(this.$route.query.tel).then(res => {
        this.code = res.code
      })
      const TIME_COUNT = 60
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.show = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    }
  }
}
</script>
<style lang="scss">
 .register2{
     background: #fff;
     height:0.44rem;
     display: flex;
     align-items: center;
     border-bottom: 0.01rem solid #f2f2f2;
     h1{
         font-size:0.18rem;
         display: inline-block;
         width: 100%;
         text-align: center;
         font-family: 'Microsoft Yahei';
         color:#030303;
         font-weight: 400;
         padding-right:0.6rem;
     }
     a{
         display: inline-block;
         font-size:0.18rem;
         width:0.4rem;
         height:0.44rem;
         margin-right: .2rem;
         color: #817f7f;
         display:flex;
         align-items: center;
         justify-content: center;
         font-weight: 500;
     }
 }
 .register-box{
     background: #f2f2f2;
     width: 100%;
     height: 100%;
 }
 .sendCode{
     background: #fff;
     height: auto;
     .sendCodeInfo{
     display: flex;
     justify-content: space-between;
     height: 0.44rem;
     align-items: center;
     font-size: 0.12rem;
     color:#989898;
     padding: 0.05rem 0.1rem;;
        em{
            color: #000;
            padding:0 0.04rem;
        }
     }
     .sendCodeInput{
       height: 0.5rem;
        display: flex;
        align-items: center;
        margin: 0.05rem 0.1rem;
        justify-content: space-between;
        border-bottom: 0.01rem solid #f2f2f2;
       i, a , input{
           display: inline-block;
       }
       a{
           color:#989898;
           font-size:0.12rem;
           border: 0.01rem solid #e4e2e2;
           border-radius: 0.08rem;
           width:0.8rem;
           height: 0.34rem;
           text-align: center;
           line-height: 0.34rem;
       }
       i{
         font-size: 0.14rem;
       }
       input{
           width:2.37rem;
           border:0;
       }
     }
 }
 .registered{
     margin-top:0.08rem;
     box-shadow: 0.01rem 0.012rem 0.03rem #cac8c8;
      background: #fff;
     padding: 0.05rem;
     input{
         width:3.07rem;
         border:0;
         text-indent: 0.1rem;
     }
     .users{
         height: 0.45rem;
         display: flex;
         align-items: center;
     }
     .password{
         height: 0.45rem;
          display: flex;
         align-items: center;
     }
     .password{
         height: 0.45rem;
          display: flex;
         align-items: center;
     }
 }
 .agreement{
     width:3.55rem;
     margin:0.05rem auto;
     height: 0.29rem;
     padding: 0.05rem;
     font-size:0.11rem;
 }
 .register-btn{
     width:3.55rem;
     margin:0 auto;
 }
</style>
